var oul = document.querySelector('#stairs');
console.log(oul);
var oli = document.querySelectorAll('#stairs li');
var obox = document.querySelectorAll('.box');
//		console.log(obox[2].offsetTop)
window.onscroll = function () {
    //获取滚动条到顶部的距离
    var h = document.documentElement.scrollTop || document.body.scrollTop;
    //判断滚动条的高度，是否显示ul标签
    if (h > 500) {

        oul.style.display = 'block';
        // oul.style.transform='scale(1)'
    } else {
        oul.style.display = 'none';
        // oul.style.transform='scale(0)'
    }
    if(h>568){

    }
    //给最后一个li标签绑定点击事件，让滚动条回到顶端
    //     oli[oli.length-1].onclick=function(){
    // //				document.documentElement.scrollTop=document.body.scrollTop=0;
    //         timer=setInterval(function(){
    //             h-=50;//h=h-50;
    //             if(h<=0){
    //                 clearInterval(timer)
    //             }else{
    //                 document.documentElement.scrollTop=document.body.scrollTop=h;
    //             }
    //         },10)
    //     }
    //循环所有的li标签，给li标签绑定点击事件
    console.log(document.documentElement.scrollTop)
    // for (var i = 0; i < oli.length - 1; i++) {
    //     oli[i].index = i;
        oli[0].onclick = function () {
        document.documentElement.scrollTop = 0
        }
        oli[1].onclick = function () {
            document.documentElement.scrollTop = 568
        }
        oli[2].onclick = function () {
            document.documentElement.scrollTop = 1136
        }
        oli[3].onclick = function () {
            document.documentElement.scrollTop =1872
        }
        oli[4].onclick = function () {
            document.documentElement.scrollTop = 2428
        }
    // }
    //循环div
    for (var j = 0; j < obox.length; j++) {
        //oli[j]会得到某个li赋值给m
        //offsetTop得到某个元素到浏览器顶部的距离
        if (h >= obox[j].offsetTop - 300) {
            //循环所有的li
            for (var k = 0; k < oli.length; k++) {
                if (oli[j] == oli[k]) {
                    oli[k].style.background = 'yellow';
                } else {
                    oli[k].style.background = '';
                }
            }
        }
    }


}